<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="IE=Edge,chrome=1">
    <title>试题信息管理 </title>
    <link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="css/yxpMsg.css">
    <link rel="stylesheet" href="css/question.css">
</head>
<body>
<!-- main -->
<main class="clearfix">
    <!-- 右边内容 -->
    <div class="wrap">
        <!-- 数据显示 -->
        <div class="content">
        	<table height="10%" style="padding:20px;border:200px">
        		<tbody>
        			<tr>
        				<th><center><font style="color:blue">试题管理</font></center></th>
        			</tr>
        			<tr>
        				<th><span id="excelLoad" class="excel"><a href="#" target="#" onclick="setTarget(this);" id="excelTemplate"><span>下载excel模板</span></a></span>
                		<span id="importExcel" class="excel">上传excel</span>&nbsp;&nbsp;<span id="exportExcel" class="excel">导出excel</span></th>
        			</tr>
        		</tbody>
        	</table>
        	<div class="search">
                	<span>题型: </span>
                    <select id="questionType">
                        <option value="">请选择</option>
                        <option value="0">看图猜成语</option>
                        <option value="1">单选题</option>
                        <option value="2">填空题</option>
                    </select>
                    <span>难度: </span>
                    <select id="questionLevel">
                        <option value="">请选择</option>
                        <option value="1">一级</option>
                        <option value="2">二级</option>
                        <option value="3">三级</option>
                        <option value="4">四级</option>
                        <option value="5">五级</option>
                        <option value="6">六级</option>
                        <option value="7">七级</option>
                    </select>
                    <span>是否删除: </span>
                    <select id="isDel">
                        <option value="">请选择</option>
                        <option value="0">未删除</option>
                        <option value="1">已删除</option>
                    </select>
                    <span>更新时间: </span><input type="text" id="dateBegin"> -- <input type="text" id="dateEnd">
                    <label>
                        <input type="search" placeholder="题干关键字" value="" id="questionContentStr">
                        <span class="question-search search" id="questionSearch" onclick="queryResultList()">搜索</span>
                        <span class="question-delete delete" id="questionDelete">删除</span>
                    </label>
                </div>
        	<!-- 数据显示： -->
            <div style="overflow: auto">
                <table id="quesData" class="quesData">
                    <thead>
                    <tr class="companyth">
                        <td><input type="checkbox" id="questionChHeader"/>序号</td>
                        <td>题型</td>
                        <td>难度</td>
                        <td>题干</td>
                        <td>选项</td>
                        <td>答案</td>
                        <td>提示</td>
                        <td>解释</td>
                        <td>被答次数</td>
                        <td>被答错次数</td>
                        <td>创建时间</td>
                        <td>更新时间</td>
                        <td>是否删除</td>
                        <td>操作</td>
                    </tr>
                    </thead>
                    <tbody id="question_tbody">
                    </tbody>
                </table>
            </div>
            <!-- 一页只显示20条 -->
            <!-- 分页 -->
            <div class="page">
                <a href="javascript:prevPage()" id="prev" class="prev">上一页</a>
                <span id="now">1</span>/<span id="all"></span>
                <a href="javascript:nextPage()" id="next" class="prev">下一页</a>
                <input type="text" id="turn" placeholder="页数" value="" style="width: 40px">
                <a href="javascript:turnPage()" class="turn">跳转</a>
            </div>
         </div>
    </div>
</main>

<!-- js -->
<script src="js/jquery.1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script src="js/jquery.cookie.min.js"></script>
<script src="js/jquery.yxpMsg.js"></script>
<script src="js/question.js"></script>
<script src="js/ajaxSet/ajaxSet.js"></script>
<script type="text/javascript" src="js/plupload-2.3.4/js/plupload.full.min.js"></script>
<script type="text/javascript" src="js/plupload-2.3.4/js/i18n/zh_CN.js"></script>

<!-- 在ie8-下兼容html5 -->
<script type="text/javascript">
    (function() {
        if (!
            /*@cc_on!@*/
                0) return;
        var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
        var i= e.length;
        while (i--){
            document.createElement(e[i])
        }
    })();
    $(function(){
		 //时间选择器
    	$("#dateBegin").datepicker({
			//showHms:true,/*是否显示时分秒*/
			changeMonth: true,
			changeYear: true,
			dateFormat:'yy-mm-dd',
			buttonImageOnly: true,
			showOn: 'both',
			showButtonPanel:true // must 
		});
    	$("#dateEnd").datepicker({
			//showHms:true,/*是否显示时分秒*/
			changeMonth: true,
			changeYear: true,
			dateFormat:'yy-mm-dd',
			buttonImageOnly: true,
			showOn: 'both',
			showButtonPanel:true // must 
		});
	});
	//实例化一个plupload上传对象
	var uploader = new plupload.Uploader({
		browse_button : 'importExcel', //触发文件选择对话框的按钮，为那个元素id
		url : 'admin/question/importQuestionInfo?token='+$.cookie('token'), //服务器端的上传页面地址
		flash_swf_url : 'js/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
		max_file_size : '10mb',//限制为10MB,
		multipart : true,
		filters : [ {
			title : "excel文件",
			extensions : "xls,xlsx"
		} ],//图片限制
		silverlight_xap_url : 'js/Moxie.xap' //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
	});
	//在实例对象上调用init()方法进行初始化
	uploader.init();
	//图片选择完毕触发
	uploader.bind('FilesAdded', function(uploader, files) {
		uploader.start();
		/*$('#file-list').show();
		for (var i = 0, len = files.length; i < len; i++) {
			var file_name = files[i].name; //文件名
			//构造html来更新UI
			var html = '<li id="file-' + files[i].id +'"><p class="file-name">'
					+ file_name + '</p><p class="progress"></p></li>';
			$(html).appendTo('#file-list');
		}*/
	});
	//图片上传成功触发，ps:data是返回值（第三个参数是返回值）
	uploader.bind('FileUploaded', function(uploader, files, data) {
		if (data.status == 200) {
			var res = JSON.parse(data.response);
			if(res.msgCode==300){
				initLoad();
				$.yxpAlertMsg('导入成功');
			}else{
				if(res.message){
					var msg = res.message.replace('<br/>','');
					$.yxpAlertMsg(msg);
				}else{
					$.yxpAlertMsg('上传失败');
				}
			}
		} else {
			console.log(data);
			$.yxpAlertMsg('上传失败');
		}
	});
	/* uploader.bind('Error', function(uploader, errObject) {
		$.yxpAlertMsg(errObject.message);
	}); */
	//会在文件上传过程中不断触发，可以用此事件来显示上传进度监听（比如说上传进度）
	uploader.bind('UploadProgress', function(uploader, file) {
		$('#file-' + file.id + ' .progress').css('width', file.percent + '%');//控制进度条
	});
</script>

</body>
</html>